<template>
  <div class="body" v-if="isshow">
    <van-nav-bar :title="renderList.community" class="nav_bar">
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="white"
          @click="$router.go(-1)"
        />
      </template>
    </van-nav-bar>

    <van-image
      width="100%"
      height="200px"
      :src="`http://liufusong.top:8080${renderList.houseImg}`"
    />

    <div class="news">
      <div class="newsheader">
        <h4>整租整租</h4>
        <span>{{ renderList.tags[0] }}</span>
      </div>
      <div class="newsbody">
        <ul>
          <li>
            <div>
              <span>{{ renderList.price }}/</span><i>月</i>
            </div>
            <span>租金</span>
          </li>
          <li>
            <div>
              <span>{{ renderList.roomType }}</span>
            </div>
            <span>房型</span>
          </li>
          <li>
            <div>
              <span>{{ renderList.size }}平米</span>
            </div>
            <span>租金</span>
          </li>
        </ul>
      </div>
      <div class="newsfotter">
        <ul>
          <li><span>精装：</span><i>精装</i></li>
          <li>
            <span>朝向：</span><i>{{ renderList.oriented[0] || '' }}</i>
          </li>
          <li>
            <span>楼层：</span><i>{{ renderList.floor }}</i>
          </li>
          <li><span>精装：</span><i>精装</i></li>
        </ul>
      </div>
    </div>

    <div class="map" >
      <h4 class="hhh">小区：{{renderList.community}}</h4>
      <div class="baidumap">
      <HouseMapVue :locationHouse="renderList.coord" />  
      </div>
      <div class="house">
        <h4>房屋配套</h4>
        <van-grid :column-num="5" :border="false" class="van_grid">
          <van-grid-item v-for="(item, index) in iconList" :key="index"  >
            <template #text>
              <span>{{ item.text }}</span>
            </template>
            <template #icon>
              <van-icon class="iconfont" class-prefix="icon" :name="item.icon" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <div class="housenews">
      <h4>房源概括</h4>
      <van-card class="vant_card">
        <template #thumb>
          <van-image
            round
            width="50"
            height="50"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </template>
        <template #title>
          <div class="name">王女士</div>
        </template>
        <template #desc>
          <div class="house">已认证房主</div>
        </template>
        <template #footer>
          <van-button type="default">发消息</van-button>
        </template>
      </van-card>
      <p>
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </p>
    </div>

    <div class="like">
      <h4>猜你喜欢</h4>
      <RenderLi v-for="(item, index) in likelist" :key="index" :item="item" />
    </div>
    <div class="footer">
      <div class="btn1" @click="collectHouse">
        <van-icon name="star-o" :class="{ btnyellow: flag }" />收藏
      </div>
      <div class="btn2">在线咨询</div>
      <div class="btn3">电话预约</div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { getHouseall, collectHouse, removeHouse } from '@/api/house'
import { getToken } from '@/utils/storage'
import RenderLi from '@/components/RenderLi.vue'
import { getHouseList } from '@/api/search'
import {changeIcon} from '@/utils/icon'
import HouseMapVue from '@/components/MapContainer/HouseMap.vue'
export default {
  name: 'Detail',
  components: {
    RenderLi,HouseMapVue
  },
  props: {},
  data () {
    return {
      renderList: {},
      flag: false,
      likelist: [],
      isshow:false,
      iconList:[]
    }
  },
  async created () {
    const {
      data: { body }
    } = await getHouseall(this.$route.query.id)
    this.renderList = body
    const { data } = await getHouseList({ start: 1, end: 3 })
    this.likelist = data.body.list
    this.iconList=changeIcon(this.renderList.supporting[0])
    this.isshow=true
  },
  methods: {
    async collectHouse () {
      const token = getToken()
      if (!token) {
        Dialog.confirm({
          title: '好客租房',
          message: '您还没登入？去登入'
        })
          .then(() => {
            this.$router.push('/login')
          })
          .catch(() => {
            // on cancel
          })
      } else {
        if (!this.flag) {
            const { data } = await collectHouse(this.renderList.houseCode)
          console.log(data)
          this.flag = true
          this.$toast.success('收藏成功')
        } else {
          const { data } = await removeHouse(this.renderList.houseCode)
          console.log(data)
          this.flag = false
          this.$toast.success('移除成功')
        }
      }
    },

  }
}
</script>

<style scoped lang="less">
.body {
  background-color: #ccc;
  h4 {
    height: 20px;
  }
}
.nav_bar {
  background-color: #23d881;
}
.news {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
  .newsheader span {
    display: inline-block;
    background-color: #39becd;
    margin-bottom: 15px;
  }
  .newsbody {
    padding: 15px 0;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        display: flex;
        flex-direction: column;
        text-align: center;
        div {
          margin-bottom: 5px;
          span {
            font-size: 18px;
            color: red;
          }
          i {
            font-size: 14px;
            color: red;
          }
        }
        span {
          font-size: 14px;
          color: #ccc;
        }
      }
    }
  }
  .newsfotter {
    ul {
      display: flex;
      flex-wrap: wrap;
      padding-top: 15px;
      li {
        width: 170px;
        height: 30px;
        font-size: 14px;
        font-weight: 400;
        span {
          color: #ccc;
        }
        i {
          font-style: normal;
        }
      }
    }
  }
}
.map {
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;
  padding-top: 10px;
  .hhh{
      padding-left: 10px;
  }
  .house {
    padding: 15px;
    .van_grid {
      border-top: 2px solid #ccc;
    }
  }
  .baidumap{
    width:375px ;
    height: 145px;
  }
}
.housenews {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  .vant_card {
    background-color: #fff;
    height: 62px;
    border-top: 2px solid #ccc;
    .van-card__thumb {
      width: 50px;
    }
    /deep/.van-card__header {
      height: 60px;
    }
    .van-button {
      position: absolute;
      top: 40%;
      right: 10%;
      width: 70px;
      height: 30px;
      font-size: 12px;
      padding-bottom: 7px;
      color: #33be85;
      border: 1px solid #33be85;
    }
    div {
      margin-top: 3px;
    }
    .house {
      color: red;
      font-size: 12px;
    }
  }
  p {
    font-size: 14px;
  }
}

.like {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 50px;
  h4 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 0;
  }
}
.btnyellow {
  background-color: yellow;
}
.footer {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  color: #999;
  font-size: 17px;
  background-color: #fff;
  div {
    flex: 1;
    width: 125px;
    border: 1px solid #ccc;
  }
  .btn3 {
    background-color: #21b97a;
    color: #fff;
  }
}
</style>
